<!--
 * @Description: 弹窗选择
 * @Author: chenju
 * @Date: 2022-03-22 16:17:19
 * @LastEditors: chenju
 * @LastEditTime: 2022-04-15 17:25:16
-->
<template>
  <BaseDialog
    class="g-select-type-dialog__wrapper"
    title=""
    append-to-body
    destroy-on-close
    :width="764"
    :close-on-click-modal="false"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    :confirm-text="props.confirmText"
    :showCancelButton="false"
    footer-position="center"
    :loading="props.loading"
  >
    <div class="g-select-type-dialog__container" v-loading="props.loading">
      <div class="container__header g-flex-center-center--column">
        <span class="g-font-18n1b">{{ props.title }}</span>
        <span class="g-font-14n2 g-mt4">{{ props.titleDesc }}</span>
      </div>
      <div class="container__body g-flex-between-center">
        <div
          class="body-item g-flex-start-center--column"
          :class="[
            localFillType === item.value ? 'body-item--active' : '',
            item.disabled ? 'body-item--disabled' : ''
          ]"
          @click="handleClick(item)"
          v-for="item in props.options"
          :key="item.value"
        >
          <span class="g-font-16n1b g-mb26">{{ item.label }}</span>
          <div class="body-item-middle g-flex-center-center">
            <img :src="require(`@/assets/images/${item.icon}.png`)" v-if="item.icon" />
            <el-select
              class="g-mt8"
              v-model="item.selectValue"
              :placeholder="item.placeholder || '请选择'"
              :disabled="localFillType !== item.value"
              v-if="item.isSelect"
            >
              <el-option
                v-for="option in item.selectOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </div>
          <span class="g-font-12n3-2 g-mt22">{{ item.desc }}</span>
        </div>
      </div>
    </div>
  </BaseDialog>
</template>
<script lang="ts" setup name="GSelectTypeDialog">
import { defineProps, withDefaults, defineEmits, computed, watch } from 'vue';
import { BaseDialog } from '@/components/BaseDialog/index';
import { useMessage } from '@/hooks/useMessage';
import type { SelectTypeDialogOptions } from './types';
interface GSelectTypeDialogProps {
  // 标题
  title?: string;
  // 标题描述
  titleDesc?: string;
  // 确定按钮文案
  confirmText?: string;
  // 显示状态
  visible: boolean;
  // 选项
  options: SelectTypeDialogOptions[];
  // 选中类型
  selectType: string;
  // 提交后loading状态
  loading?: boolean;
}
const props = withDefaults(defineProps<GSelectTypeDialogProps>(), {
  title: '',
  titleDesc: '',
  confirmText: '提交选择',
  loading: false
});
const emit = defineEmits(['update:visible', 'update:selectType', 'confirm']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
const localFillType = computed({
  get: () => {
    return props.selectType;
  },
  set: val => {
    emit('update:selectType', val);
  }
});
watch(
  () => dialogVisible.value,
  (visible: boolean) => {
    // 关闭时，初始化部分数据
    if (!visible) {
      localFillType.value = '';
    }
  }
);
const { createMessage } = useMessage();

// 选择
function handleClick(row: any) {
  if (row.disabled) return;
  localFillType.value = row.value;
}

// 提交
async function handleConfirm() {
  if (!localFillType.value) {
    createMessage.error('请先选择');
    return;
  }
  emit('confirm', localFillType.value);
}
</script>
<style lang="scss" scoped>
.g-select-type-dialog__container {
  .container__header {
    margin-top: -56px;
    width: 100%;
    height: 120px;
  }
  .container__body {
    padding: 0 12px 12px;
    .body-item {
      padding: 28px 25px 0;
      width: 100%;
      height: 240px;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e4e7ed;
      text-align: center;
      cursor: pointer;
      .body-item-middle {
        width: 100%;
        // height: 56px;
        img {
          width: 56px;
          height: 56px;
        }
      }
      &:hover {
        background: #f6f9fa;
      }
      &.body-item--active {
        background: #f6f9fa;
        border-color: #489375;
      }
      &.body-item--disabled {
        background: #fff;
        cursor: not-allowed;
        &:hover {
          background: #fff;
        }
      }
    }
    .body-item + .body-item {
      margin-left: 20px;
    }
  }
}
</style>
<style lang="scss">
.g-select-type-dialog__wrapper {
  .el-dialog__footer {
    padding-bottom: 32px;
  }
}
</style>
